<template>
  <!--数量-->
  <div class="welcome_container">
    <div class="nums">
      <div class="num-item">
        <div class="title">
          <span class="iconfont icon-shijuan"></span>
          <span>班级总数</span>
        </div>
        <div class="num">{{clazzCount}}</div>
      </div>
      <div class="num-item">
        <div class="title">
          <span class="iconfont icon-subject"></span>
          <span>班级总人数</span>
        </div>
        <div class="num">{{clazzStudentCount}}</div>
      </div>
      <div class="num-item">
        <div class="title">
          <span class="iconfont icon-exam"></span>
          <span>试卷总数</span>
        </div>
        <div class="num">{{examPaperCount}}</div>
      </div>
      <div class="num-item">
        <div class="title">
          <span class="iconfont icon-bianji"></span>
          <span>题目总数</span>
        </div>
        <div class="num">{{questionCount}}</div>
      </div>
    </div>
    <!--用户活跃数-->
    <div class="echarts">
      <div class="main clazz-user-num" id="echarts-clazz-user-num" style="width: 100%; height: 400px"></div>
    </div>
  </div>
</template>
<script>
//导入echarts

export default {
    data(){
      return {
        clazzCount: 0,
        clazzStudentCount: 0,
        examPaperCount: 0,
        questionCount: 0, 
        echartsClazzUserNum : null,
        echartsClazzUserNumData: []

      }
    },
    mounted(){
      //初始化用户活跃数
      this.echartsClazzUserNum = this.$echarts.init(document.getElementById("echarts-clazz-user-num"));
      this.init();
      this.getRequest("/api/teacher/dashboard/index").then( resp => {
        if(resp && resp.code == 200){
          this.clazzCount = resp.obj.clazzCount
          this.clazzStudentCount = resp.obj.clazzStudentCount
          this.examPaperCount = resp.obj.examPaperCount
          this.questionCount = resp.obj.questionCount
          this.echartsClazzUserNum.setOption(this.setOptions("班级人数分布",resp.obj.keyValues));
        }
      })
    },
    methods:{
      //初始化用户活跃数 echarts
      init(){
        
        window.addEventListener("resize", ()=>{
          this.echartsClazzUserNum.resize();
        })
      },
      setOptions(title,data){
        return {
          title: {
            text: title,
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: '50%',
              data: data,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
      }
    }
     
}
</script>

<style  lang="scss" scoped>
.welcome_container{

}
.nums{
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin: 0 20px;
  .num-item{
    display: flex;
    width: 23%;
    height: 180px;
    border-radius: 10px;
    @include prefix(box-shadow,0 2px 4px #0000003b);
    .title{
      flex:1;
      display: flex;
      justify-content: center;
      margin: 22px 10px;
        .iconfont{
          font-size: 26px;
          margin-right: 10px;
        }
        span:last-child{
          margin-top: 1px;
        }
    }
    .num{
      flex:1;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      margin: 0 8px 15px 0;
      color: #333333;
      font-weight: bold;
      font-size: 44px;
    }
    &:nth-child(1){
      background: linear-gradient(139deg,rgba(255,255,255,0.2) 50%,rgba(102,187,106,0.2) 20%,rgba(102,187,106,1));
      .iconfont{
        color: rgba(102,187,106,1);
      }
    }
    &:nth-child(2){
      background: linear-gradient(139deg,rgba(255,255,255,0.2) 50%,rgba(58,146,255,0.2) 20%,rgba(58,146,255,1));
      .iconfont{
        color: rgba(58,146,255,1);
      }
    }
     &:nth-child(3){
      background: linear-gradient(139deg,rgba(255,255,255,0.2) 50%,rgba(64,201,198,0.2) 20%,rgba(64,201,198,1));
      .iconfont{
        color: rgba(64,201,198,1);
      }
    }
     &:nth-child(4){
      background: linear-gradient(139deg,rgba(255,255,255,0.2) 50%,rgba(245,108,108,0.2) 20%,rgba(245,108,108,1));
      
      .iconfont{
        color: rgba(245,108,108,1);
      }
    }
  }
}
.echarts{
  width:100%;
  height: 445px;
  margin: 30px 20px;
  background-color: #fff;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 20px;
  @include prefix(box-shadow,0 2px 4px #0000003b);
}
</style>